<style lang="scss" scoped>
.payform{
		.tit{ padding:30rpx; color:#666; text-align: center; font-size:32rpx; label{color:red;} text{ color:red; font-size:50rpx; margin-right:5rpx;}}
		.line{height:10rpx; background:#f2f2f2;}
		.item{ display:flex; border-bottom:1px solid #f1f1f1; align-items:center; justify-content: space-between; padding:25rpx 30rpx;
			.fl{color:#999;} 
			.fr{ color:#333; position: relative; text-align:right; flex:1; &.red{color:red; font-size:33rpx;}}
			image{width:30rpx; height:30rpx; margin-left:10rpx;}
		}
		.pd20{ padding:40rpx 20rpx;}
}
//优惠券
.model-coupon{position: fixed; left:100%; transition: all 0.4s ease; opacity:0; top:0; width:100%; height:100%; z-index:2222; background:#fff; &.show{ left:0; opacity:1;}
  .model-tit{ height:80rpx; font-weight:bold; line-height:80rpx; position: absolute; z-index:22; top:0; left:0; width:100%; text-align: center; box-shadow:#eee 0 0 12rpx; background:#fff;
		  image{position: absolute; left:0; width:80rpx; padding:20rpx; top:0; height:100%;}
		}
		.coupon-list{ height:100%; background:#f1f1f1; 
		  .item{ background:#fff; position: relative; height:200rpx; margin:0 30rpx; display:flex;  box-shadow:#eee 0 0 10rpx; border-radius:15rpx; overflow:hidden; margin-top:35rpx;
		   .itm{ display:flex; overflow:hidden; align-items:center; justify-content:center;}
		  	.fl{ width:200rpx; text-align: center; .text{ color:#888;} .price{ color:#ff3000; font-size:60rpx; font-weight:bold; text{ color:#ff3000; font-weight:normal; font-size:30rpx;}}}
		  	.fm{ flex:1;.tit{ font-weight:bold;} .text{ padding-top:12rpx; color:#bfbfbf; font-size:26rpx;}}
		  	.fr{  width:200rpx; overflow:inherit; height:200rpx; display: flex; align-items: center; justify-content: center; border-left:1px dotted #f1f1f1; 
					   .radio{ width:50rpx; height:50rpx; display: flex; align-items: center; justify-content: center; border:1px solid #ddd; border-radius:50%; background:#fff;}
								.radio image{ width:25rpx; height:25rpx;} .radio.checked{ background:$main-color; border-color:$main-color;}
					}	
		  	&:before,&:after { width:40rpx; height:40rpx; display:block; border-radius:50%; position:absolute; right:200rpx; margin-right:-22rpx; background:#f1f1f1; z-index:1; content:'';}
		  	&:before{ top:-30rpx;}&:after{ bottom:-30rpx;} 
		  }
		}
}
.nodata{ top:40%;}
</style>
<template>
	<view>
		<view class="payform">
			<view class="tit">
					<view>支付金额：<label>￥</label><text>{{paymoney}}</text>元</view>
			</view>	
				<view class="line"></view>
			<view class="item">
				<view class="fl">订单号</view><view class="fr">{{orderno}}</view>
			</view>
			<view class="item" @tap="show=true">
				<view class="fl">优惠券</view>
				<block v-if="couponprice==''">
					<view class="fr" style="color:#999;">请选择优惠券</view>
					<image src="/static/right.png"></image>
				</block>
				<block v-else>
					 <view class="fr">已优惠{{couponprice}}元</view>
				</block>
			</view>
			<view class="item">
				<view class="fl">支付方式</view><view class="fr">微信</view>
			</view>
			<view class="pd20"><button class="btn" :disabled="submit" @tap="orderPay">{{submit?'支付中...':'立即支付'}}</button></view>
		</view>
		<!--用户优惠券列表-->
		<view class="model-coupon" :class="show?'show':''">
			  <view class="model-tit"><image src="/static/left.png" @tap="show=false"></image>选择优惠券</view>
					<view style="height:80rpx;"></view>
					<scroll-view class="coupon-list" scroll-y>
						 	 <view class="item" v-for="(itm,inx) in list" :key="inx">
						 			 <view class="itm fl">
						 					 <view class="boxc">
						 								<view class="price"><text>￥</text>{{itm.couponprice}}</view>
						 								<view class="text">抵扣{{itm.couponprice}}元</view>
						 						</view>
						 				</view>
						 				<view class="itm fm">
						 					 <view class="boxc">
						 					 		<view class="tit">{{itm.coupontitle}}</view>
						 					 		<view class="text">有效日期:{{itm.expiretime.substr(0,10)}}</view>
						 					 </view>
						 				</view>
						 				<view class="itm fr">
						 					  <view class="radio checked" v-if="couponid==itm.id" @tap="radiotap(0,inx)"><image src="/static/gou.png"></image></view>
														<view class="radio" v-if="couponid!=itm.id" @tap="radiotap(itm.id,inx)"></view>
						 				</view>
						 		</view>
						 		<view class="nodata" v-if="nodata">
						 			  <image src="/static/noimg.png"></image>
						 					<view>暂无优惠券~</view>
						 		</view>
					</scroll-view>
		</view>
		
	</view>
</template>

<script>
 import pay from '@/utils/pay.js'
	export default {
		data() {
			return {
				 submit:false,
				 nodata:false,
				 list:[], //优惠券列表
				 orderno:'', //订单编号				
				 paymoney:'', //支付金额
				 title:'', //标题
				 show:false,
				 couponid:'',
				 couponprice:'',
			}
		},
		async onLoad(e) {
			this.orderno = e.orderno;
			this.title = e.title;
			this.calcPayPrice(0);
			this.getMemCoupon();			
		},
		methods: {
			
			//获取优惠券
			async getMemCoupon(){
				  const json = await this.api.memCouponList({q:{size:1000,current:1,use:0}});
						if(json.data.code==0){
							  this.list = json.data.data.list;
								if(json.data.data.total==0){ this.nodata = true; }
						}
			},
			
			//计算价格
			async radiotap(id,index){
				  this.couponid = id;
					this.calcPayPrice(id);
					this.show = false;
			},	
			
			//calcPayPrice
			async calcPayPrice(memcouponid){
				const json = await this.api.calcPayPrice({q:{memcouponid:memcouponid,orderno:this.orderno}});
				if(json.data.code==0){
						this.couponprice = json.data.data.couponprice;
						this.paymoney =json.data.data.paymoney;					
				}	
			},
					
			
			//订单支付
			async orderPay(){		
				  var that = this;
				  this.submit = true;
				  let timer = setTimeout(res=>{	that.submit = false;	clearTimeout(timer);},1500)
				  const json = await this.api.orderPay({q:{body:this.title,memcouponid:this.couponid,orderno:this.orderno,openid:this.app.globalData.openid}});
					if(json.data.code==0){
						if(json.data.data==0){
							uni.showToast({title:'支付成功'});
							setTimeout(res=>{ uni.redirectTo({url:'/pages/my/order/detail?orderno='+that.orderno}) },1000);	
						}else{
							this.callPay(json.data.data); 
						}
					}
			},	
					
			//调起支付
			callPay(params){
					var that = this;
					pay.xcxPay(params,
					function(){ 
						 uni.showToast({title:'支付成功'}); 
							setTimeout(res=>{ uni.redirectTo({url:'/pages/my/order/detail?orderno='+that.orderno}) },1000);	
					},
					function(){ 
						uni.showToast({title:'支付失败'}); 
						setTimeout(res=>{ uni.redirectTo({url:'/pages/my/order/detail?orderno='+that.orderno}) },1000); 
					}) 
			},
			
		}
	}
</script>

<style>
</style>
